<template>
	<view class="container">
		<view class="compute"><text>共{{songs.length}}条</text><text class="tip">右滑更多选项</text></view>
		<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in songs" :key="item.id" @click="click"
			@open="open" :options="options" class="swipe-action">
			<view class="item u-border-bottom">
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="title-wrap" @tap="todetail(item.id,index)">
					<text class="title u-line-2">{{ item.song }}</text>
				</view>
			</view>
		</u-swipe-action>
		<view class="load-more" v-if="!notHave">暂无数据</view>
		<view class="nothing" v-if="!songs.length">
			<image src="/static/img/null.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				songs: [],
				page: 1,
				notHave: false,
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
						text: '分享',
						style: {
							backgroundColor: '#007aff'
						}
					},
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		methods: {
			// 确定删除提示框
			confirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: '删除曲谱',
						content: '确定要删除该曲谱？',
						showCancel: true, //是否显示取消按钮
						cancelText: "否", //默认是“取消”
						confirmText: "是", //默认是“确定”
						success: function(res) {
							resolve(res)
						}
					})
				})
			},
			click(index, index1) {
				if (index1 == 1) {
					this.delete(index)
				} else {
					this.$u.toast(`暂未实现分享功能呢`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.songs[index].show = true;
				this.songs.map((val, idx) => {
					if (index != idx) this.songs[idx].show = false;
				})
			},
			// 封装当前页请求数据函数
			async getdata() {
				if (!this.notHave) {
					let openId = JSON.parse(uni.getStorageSync('info'))["openid"]
					let {
						data
					} = await this.$request({
						url: `/user/allShoucang`,
						data: {
							openId: openId,
							page: this.page
						}
					})
					data.forEach((item, i) => {
						item.show = false
					})
					if (data.length) {
						this.songs = this.songs.concat(data)
					} else {
						this.notHave = true
					}
				}
			},
			// 详情页
			todetail(id,index) {
				
				let which
				this.songs[index].z_id ? (which = 'zhuanji') : (which = "category")
				console.log(which)
				uni.setStorageSync('which', which)
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			},
			// 确定删除提示框
			confirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: '删除曲谱',
						content: '确定要删除该曲谱？',
						showCancel: true, //是否显示取消按钮
						cancelText: "否", //默认是“取消”
						confirmText: "是", //默认是“确定”
						success: function(res) {
							resolve(res)
						}
					})
				})
			},
			// 删除歌曲
			async delete(index) {
				let res = await this.confirm()
				if (res.confirm) {
					let item = this.songs[index]
					let id = item["id"]
					let isCate
					let openId = JSON.parse(uni.getStorageSync('info'))["openid"]
					// let openId="o943F4stBloU40Z9z4IZpyPrIc38"
					if (Object.keys(item).indexOf("c_id") != -1) {
						// 如果这首歌有c_id就是category分类
						// isCate=true
						isCate = true
					} else {
						isCate = false
					}
					let ret = await this.$request({
						url: '/user/cancleShoucang',
						data: {
							isCate,
							id,
							openId
						}
					})
					if (ret.affectedRows) {
						uni.showToast({
							title: '删除成功',
							icon: "success"
						})
						let timer = setTimeout(() => {
							this.songs.splice(index, 1)
							this.songs = []
							this.page = 1
							this.notHave = false
							this.getdata()
							clearTimeout(timer)
						}, 1500)
					}

				} else {
					uni.showToast({
						title: '删除失败',
						icon: "error"
					})
				}
			},
		},
		onLoad() {
			this.getdata()
		}
	}
</script>

<style>
	.tip {
		position: absolute;
		top: 20rpx;
		right: 40rpx
	}

	.load-more {
		text-align: center;
		box-sizing: border-box;
		padding: 40rpx;
		color: #666;
	}

	.title-wrap {
		box-sizing: border-box;
		padding: 40rpx;
	}

	.swipe-action {
		border: 2rpx solid #eee
	}

	.compute {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		color: #888;
		background-color: #F6F6F6;
		position: relative;
	}

	.i-swipeout-demo-button-group {
		display: flex;
		align-items: center;
	}

	.i-swipeout-demo-button {
		width: 50%;
		text-align: center;
		height: 184rpx;
		line-height: 184rpx;
		background-color: #5a68fd;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
	}

	.nothing {
		margin-top: calc(50% - 230rpx);
		margin-left: calc(50% - 230rpx)
	}

	.nothing image {
		width: 460rpx;
		height: 460rpx;
	}

	.container {
		width: 100%;
		height: 100vh;
	}

	/* 去除button默认样式 */

	button::after {

		border: none;

	}

	button {

		background-color: transparent;

		padding-left: 0;

		padding-right: 0;

		line-height: inherit;

	}

	button {

		border-radius: 0;

	}
</style>
